<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <script type="text/javascript" src="js/jquery.min.js"></script>
	
        
<script type="text/javascript">


function fadein(){	
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');    
}

function fadeout(){
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');    
}

// $('.deleteMeetingButton').click(function () {
// $('#popupContent').fadeOut('slow'); 
// $('#deleteMeetingConfirmDeleted').fadeIn('slow');
// $('#overlay').delay(1300).fadeOut('slow');
// $('#popupBox').delay(1300).fadeOut('slow');   
// $('#deleteMeetingConfirmDeleted').fadeOut('slow');

// });		
        </script>



        <style type="text/css">
#overlay {
    display:none;
    opacity:0.5;
    background-color:black;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 999;
}
#popupBox {
    display:none;  
    position: relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:600px;
    height: 500px;
    color: #000000;
    border:5px solid #4E93A2;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background-color:#FFFFFF;
    z-index: 1000;
   
}
#popupContent {
    display:none;
        font-family:Arial, Helvetica, sans-serif;
    color: #4E93A2;
    margin-top:30px;
    margin-left:30px;
    margin-right:30px;
}

.deleteMeetingButton{
    clear:both;
	cursor:pointer;
	width:90px;
	height:30px;
	border-radius: 4px;
	background-color: #5CD2D2;
	border:none;
	text-align:center;
	line-height:10px;
	color:#FFFFFF;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}


.deleteMeetingCancel{
    clear:both;
	cursor:pointer;
	width:90px;
	height:30px;
	border-radius: 4px;
	background-color: #5CD2D2;
	border:none;
	text-align:center;
	line-height:10px;
	color:#FFFFFF;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

#deleteMeetingConfirmDeleted
{
    display:none;
}

        </style>
</head>


<body>

  <div id="content">Content Obscured By Overlay
    <button class="deleteMeeting" onclick="fadein()">Delete</button>
  </div>



<div id="overlay" style="display: none;"></div>


<div id="popupBox" style="display: none;">  
    
<div id="popupContent" style="display: none;"><i>Are you sure you want to delete this meeting?</i><br>
        <span style="text-align:center;color:black;font-size:40px;">YO</span>
<br>
<button class="deleteMeetingButton" onclick="fadeout()">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
        
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
</div>

</body>
</html>
